<template>
	<view class="content" v-if="isShow">
		<view class="top">
			<image class="bac"  src="../../static/images/activity.jpg" mode=""></image>
			<view class="back">
				<text>{{activity.activityTitle}}</text>
			</view>
			<view class="info">
				<image :src="getRealPath(activity.imgUrl)" mode=""  @tap="go_user_detail(activity.userId)"></image><text @tap="go_user_detail(activity.userId)">{{activity.nickName}}</text>
				<text class="ct" >人数:  {{activity.nowPeople}} / {{activity.maxPeople}}</text>
			</view>
		</view>
		<view class="detail">
			<view class="title">
				<text>活动时间</text>
			</view>
			<view class="bottom">
				<text>{{formatTime(activity.startTime)}} - {{formatTime(activity.endTime)}}</text>
			</view>
		</view>
		<view class="detail">
			<view class="title">
				<text>活动地点</text>
			</view>
			<view class="bottom">
				<text>{{activity.activityAddress}}</text>
			</view>
		</view>
		<view class="detail">
			<view class="title">
				<text>活动详情</text>
			</view>
			<view class="bottom">
				<text>{{activity.activityDesc}}</text>
			</view>
		</view>
		<view class="detail" v-if="activity.userId==user.id" style="margin-bottom: 180upx;">
			<view class="title">
				<text>已报名同学</text>
			</view>
			<view class="bottom">
				<view class="passed" v-for="(item,index) in passlist" :key="index">
					<view class="left">{{item.realName}}</view>
					<view class="right" @tap="makePhone(item.phone)">立即联系</view>
				</view>
			</view>
		</view>
		<view class="btn" v-if="!isGet&&activity.userId!=user.id" @tap="send">
			立即报名
		</view>
		
		<view class="isget" v-if="isGet&&activity.userId!=user.id">
			已报名
		</view>
		
		<view class="btn" v-if="activity.userId==user.id&&passlist.length==0" @tap="del">
			删除
		</view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				activity: {},
				isGet:false,
				passlist:[],
				isShow:false
			}
		},
		computed:{
			...mapState(['user'])
		},
		methods: {
			del(){
				let that = this;
				uni.showModal({
					title: '删除提醒',
					content: '是否删除此活动',
					showCancel: true,
					cancelText: '取消',
					confirmText: '立即删除',
					success: res => {
						if(res.confirm){
							utils.post("activity/delete",{
								activityId:that.activity.id,
								userId:that.user.id
							},function(data) {
								uni.navigateBack({
									delta: 1
								});
							})
						}else{
							return;
						}
					}
				});
			},
			makePhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			send(){
				if(!this.isGet) {
					if(this.user.phone==null||this.user.phone.length == 0) {
						uni.showModal({
							title: '通知提醒',
							content: '你当前未绑定手机号,点确定绑定手机号',
							showCancel: true,
							cancelText: '取消',
							confirmText: '立即绑定',
							success: res => {
								if(res.confirm){
									uni.navigateTo({
										url:"../verificationcode/verificationcode"
									})
								}else{
									return;
								}
							}
						});
						return;
					}
					let that =  this;
					uni.showModal({
						title: '通知提醒',
						content: '报名后会将你的姓名和电话号码发给发起者,确定报名吗？',
						showCancel: true,
						cancelText: '手滑了',
						confirmText: '报名',
						success: res => {
							if(res.confirm) {
								utils.post('activity/getin',{
									activityId:that.activity.id,
									userId:that.user.id
								},function(data){
									that.isGet = true;
									uni.showModal({
										title: '成功提醒 ',
										content: '你已成功报名,若要取消，请联系活动发起人协商',
										showCancel: false,
										cancelText: '',
										confirmText: '已阅',
										success: res => {
											
										},
										fail: () => {},
										complete: () => {}
									});
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			go_user_detail(userId){
				uni.navigateTo({
					url: '../usercenter/userinfo?userId='+userId
				});
			},
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return  (da.getMonth() + 1) + "月" + da.getDate()+"日 "+da.getHours()+":" +da.getMinutes();
			},
		},
		onLoad(option) {
			let that = this;
			this.activity = JSON.parse(option.activity);
			if(this.user.id == this.activity.userId) {
				utils.get("activity/getpassedlist",{
					activityId:this.activity.id
				},function(data) {
					that.passlist = data;
				})
			}else{
				utils.post("activity/judge",{
					activityId:this.activity.id,
					userId:this.user.id
				},function(data) {
					that.isGet= data;
				});
			}
			this.isShow = true;
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}
	.btn{
		width: 90%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		position:  fixed;
		bottom: 40upx;
		color: #00000;
		border-radius: 60upx;
		background: linear-gradient(to right,#EE6363 , #EE3F4D);
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 30upx;	
	}
	.passed {
		width: 100%;
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}
	.left{
		font-size: 28upx;
		margin-left: 26upx;
	}
	.right {
		width: 90upx;
		line-height: 40upx;
		height: 40upx;
		border: 1px solid #EE6363;
		border-radius: 6upx;
		font-size: 22upx;
		color: #EE6363;
	}
	.isget{
		width: 90%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		position:  fixed;
		bottom: 40upx;
		color: #00000;
		border-radius: 60upx;
		background: #000000;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 30upx;
		opacity: 0.2;
	}
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top {
		width: 100%;
		height: 310upx;
	}
	.ct{
		flex: 1;
		text-align: right;
		margin-right: 4%;
		font-size: 22upx;
		color: #999999;
	}
	.info {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80upx;
		background-color: #ffffff;
		font-size: 28upx;
	}
	.info image {
		height: 46upx;
		width: 46upx;
		border-radius: 46upx;
		margin-left: 26upx;
	}
	.info text {
		margin-left: 20upx;
	}
	.bac {
		width: 100%;
		height: 230upx;
	}

	.back {
		width: 100%;
		height: 230upx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #36BBFF;
		opacity: 0.8;
		color: #ffffff;
		font-size: 34upx;
		font-weight: 600;
		line-height: 250upx;
		text-align: center;
	}

	.detail {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		align-items: center;
	}

	.title {
		width: 92%;
		height: 100upx;
		font-size: 34upx;
		font-weight: 600;
		line-height: 100upx;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}

	.title text {
		padding-left: 10upx;
		border-left: 6upx solid #36BBFF;
	}

	.bottom {
		width: 92%;
		margin-top: 20upx;
		margin-bottom: 30upx;
	}

	.bottom text {
		font-size: 28upx;
		color: #999999;
		margin-left: 16upx;
	}
</style>
